<template>
    <div class="topContent">
        <div class="CenterBox topFlex">
            <div class="searchTitleBox">“临农云眼”产业链供需平台</div>
            <div v-if="store.token && store.user.name" class="topFlex_right">
                <span>{{ store.user?.name }}</span>
                <span class="topFlexLeftText" @click="handleLogout">退出登录</span>
            </div>
            <div v-else class="topFlex_right">
                <span class="topFlexLeftText" @click="logoJump('登录')">请登录</span>
                <!-- <span class="topFlexLeftText" @click="logoJump('注册')">注册</span> -->
            </div>
        </div>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useStore } from '@/store/store';
const store = useStore()
const logoJump = (text) => {
    router.push({
        path: '/login',
        query: { logoType: text }  // 请替换为实际参数值
    });
}
const handleLogout = async () => {
    const success = await store.logOut()
    if (success) {
        ElMessage.success('已退出登录')
        window.location.reload() // 刷新页面更新状态
    } else {
        ElMessage.error('退出失败')
    }
}
</script>
<style scoped lang="scss">
.topContent {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #BEBEBE;
}

.topFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topFlex_right {
    font-size: 12px;
    color: #1F1F1F;
}

.searchTitleBox {
    font-weight: bold;
    font-size: 20px;
    color: $button-color;
    padding: 0 28px;
    flex-shrink: 0;
}

.topFlexLeftText {
    margin: 0 10px;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}
</style>